<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <title>选项卡</title>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI-tab/css/z-UI.tab.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI-alert/css/z-UI.alert.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI.css"/>

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="z-UI.js"></script>
    <script type="text/javascript" src="z-UI-alert/js/z-UI.alert.js"></script>
    <script type="text/javascript" src="z-UI-tab/js/z-UI.tab.js"></script>
    <style>
		html,body{
            width: 100%;height: 100%;
            margin:0;background-color: white;
        }
        em{
            color: red;font-style: normal;
        }
		table td{vertical-align: top;}
        .blockDiv{
            height: 250px;overflow-x: hidden;box-sizing: border-box;
        }
    </style>
</head>
<body class="zUI-app">

<div class="zUI-full" style="padding: 20px;overflow-y: auto">
    <span class="zUI-strik angular1 sm">普通选项卡</span>
    <div class="blockDiv">
        <div class="zUI-bar line blue2 md" id="tab1">
            <div class="bar-box">
                <div class="nav active">
                    选项一
                </div>
                <div class="nav">
                    选项二
                </div>
                <div class="nav disable">
                    选项三
                </div>
                <div class="nav">
                    查看代码
                </div>
            </div>
            <div class="content">
                <div class="wrap zUI-show">
                    我从它的南大门走了进去。外面，绿色是生长在高楼大厦之下的规规范范的绿化带；而这里，则是绿色植物们自由生长的世界，仅有零星散布的几处阁楼衬托着这片绿。前方有两处池子进入了我的视野，池子中那立在水面上的枯黄的荷叶以及荷叶杆，与周围葱绿的数木形成了巨大的色调差！池子看上去是那么的死寂，而池边却那么的生机勃勃。只不过在水面上，时不时有鱼儿探出头来，也许它们是为了欣赏池边的美景，并羡慕着“那边风景独好”。其实，待到盛夏，这池便会涅槃重生，犹如魔术般，粉红的荷花、翠绿的荷叶将布满池子！
                </div>
                <div class="wrap">
                    <button class="zUI-btn md info" onclick="zUI.tab.switchTab('#tab1',0)">点我切换</button>
                </div>
                <div class="wrap">

                </div>
                <div class="wrap">
                    <div class="zUI-card" zUI-folder="show" style="width: 100%;">
                        <div class="zUI-card-title">
                            <div class="text">查看代码</div>
                        </div>
                        <div class="zUI-card-wrap">
                            <pre class="zUI-code" id="code1"></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <span class="zUI-strik angular1 sm">多个选项卡</span>
    <div class="blockDiv">
        <div class="zUI-bar line blue2 md" id="tab4">
            <div class="bar-box">
                <div class="nav active">
                    选项1
                </div>
                <div class="nav">
                    选项2
                </div>
                <div class="nav">
                    选项3
                </div>
                <div class="nav">
                    选项4
                </div>
                <div class="nav">
                    选项5
                </div>
                <div class="nav">
                    选项6
                </div>
                <div class="nav">
                    选项7
                </div>
                <div class="nav">
                    选项8
                </div>
                <div class="nav">
                    选项9
                </div>
                <div class="nav">
                    选项10
                </div>
                <div class="nav">
                    选项11
                </div>
                <div class="nav">
                    选项12
                </div>
                <div class="nav">
                    选项13
                </div>
                <div class="nav">
                    选项14
                </div>
                <div class="nav">
                    选项15
                </div>
                <div class="nav">
                    选项16
                </div>
                <div class="nav">
                    选项17
                </div>
                <div class="nav">
                    选项18
                </div>
                <div class="nav">
                    选项19
                </div>
                <div class="nav">
                    选项20
                </div>
                <div class="nav">
                    选项21
                </div>
                <div class="nav">
                    选项22
                </div>
                <div class="nav">
                    选项23
                </div>
                <div class="nav">
                    选项24
                </div>
                <div class="nav">
                    选项25
                </div>
                <div class="nav">
                    选项26
                </div>
                <div class="nav">
                    选项27
                </div>
                <div class="nav">
                    选项28
                </div>
                <div class="nav">
                    选项29
                </div>
                <div class="nav">
                    选项30
                </div>
            </div>
            <div class="content">
                <div class="wrap zUI-show">
                    选项卡数量很多，换行显示
                </div>
                <div class="wrap">
                    <button class="zUI-btn md info" onclick="zUI.tab.switchTab('#tab4',0)">点我切换</button>
                </div>
                <div class="wrap">

                </div>
            </div>
        </div>
    </div>
    <span class="zUI-strik angular1">小尺寸卡片选项卡</span>
    <div class="blockDiv">
        <div class="zUI-bar card sm">
            <div class="bar-box">
                <div class="nav-line">
                    <div class="nav active" >
                        选项一
                    </div>
                    <div class="nav">
                        选项二
                    </div>
                    <div class="nav">
                        选项三<span class="zUI-badge ssm zUI-bg-blue2">0</span>
                    </div>
                    <div class="nav disable">
                        选项四
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="wrap zUI-show">
                    卡片选项卡，用于选项数量不是很多的情况
                </div>
                <div class="wrap">
                    tab选项卡
                </div>
                <div class="wrap">
                    在你心里，最能代表“春天”的是什么呢？ 是此刻窗外的猫叫。 是衬衫和短裤。 是“沾衣欲湿杏花雨，吹面不寒杨柳风”。 是家里每年春天，母亲亲手沏的那一壶新茶，温暖又缠绵。 也许是压抑不住的出行拍摄的冲动吧。
                    许多年过去了，人们说陈年旧事可以被埋葬，然而我终于明白这是错的，因为往事会自行爬上来。回首前尘，我意识到在过去二十六年里，自己始终在窥视着那荒芜的小径。
                </div>
            </div>
        </div>
    </div>

    <span class="zUI-strik angular1">大尺寸卡片选项卡</span>
    <div class="blockDiv">
        <div class="zUI-bar card lg" id="tab2">
            <div class="bar-box">
                <div class="nav-line">
                    <div class="nav active" id="asd">
                        选项一
                    </div>
                    <div class="nav">
                        选项二<em>new</em>
                    </div>
                    <div class="nav">
                        选项三
                    </div>
                    <div class="nav disable">
                        选项四
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="wrap zUI-show">
                    在你心里，最能代表“春天”的是什么呢？ 是此刻窗外的猫叫。 是衬衫和短裤。 是“沾衣欲湿杏花雨，吹面不寒杨柳风”。 是家里每年春天，母亲亲手沏的那一壶新茶，温暖又缠绵。 也许是压抑不住的出行拍摄的冲动吧。
                </div>
                <div class="wrap">
                    tab选项卡
                </div>
                <div class="wrap">
                    许多年过去了，人们说陈年旧事可以被埋葬，然而我终于明白这是错的，因为往事会自行爬上来。回首前尘，我意识到在过去二十六年里，自己始终在窥视着那荒芜的小径。
                </div>
            </div>
        </div>
    </div>





</div>
</body>

<script>
    var c = 0;
    $(function () {
        zUI.tab.loadTab({
            elem:'.zUI-bar',
            clicks:[
                function(index,nav,wrap){

                },
                function(index,nav,wrap){
                    if(index == 2){

                    }
                },
                function(index,nav,wrap){
                    if(index == 1){
                        nav.innerHTML = '选项三<span class="zUI-badge ssm zUI-bg-blue2">'+(++c)+'</span>';
                    }

                }
            ]
        });
        zUI.tab.loadPanel({
            elem:'.zUI-card'
        });
        zUI.code.render({
            elem:'#code1',
            value: "zUI.tab.loadTab({\n" +
                "   elem:'.zUI-bar',\n" +
                "   clicks:[\n" +
                "       function(index,nav,wrap){\n" +
                "\n" +
                "       },\n" +
                "       function(index,nav,wrap){\n" +
                "           if(index == 2){\n" +
                "\n" +
                "           }\n" +
                "       },\n" +
                "       function(index,nav,wrap){\n" +
                "           if(index == 1){\n" +
                "               nav.innerHTML = '选项三<span class=\"zUI-badge ssm zUI-bg-blue2\">'+(++c)+'</span>';\n" +
                "           }\n" +
                "\n" +
                "       }\n" +
                "   ]\n" +
                "});"
        });
    });


</script>


</html>